import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15

Item {
    id: mainWindow
    width: 400
    height: 600
    visible: true

    // 用户数据模型
    ListModel {
        id: userModel
        ListElement {
            username: "Arrietty堤星"
            description: "这个人没有填简介啊~~~"
            avatar: "https://i1.hdslb.com/bfs/face/d49f2e6ef550c17416d3850c985c9029919ed357.jpg"
            isFollowed: true
            hasVip: false
        }
        ListElement {
            username: "没昨了"
            description: "没昨了，你的考研数学好帮手～"
            avatar: "https://i1.hdslb.com/bfs/face/d49f2e6ef550c17416d3850c985c9029919ed357.jpg@128w_128h_1c_1s.webp"
            isFollowed: true
            hasVip: true
        }
        ListElement {
            username: "hanser"
            description: "漂后挖耳朵，湿湿一大坨。商务请私信或邮..."
            avatar: "https://picsum.photos/100/100?random=3"
            isFollowed: true
            hasVip: true
        }
        ListElement {
            username: "未名湖与莫高窟"
            description: "这个人没有填简介啊~~~"
            avatar: "https://picsum.photos/100/100?random=4"
            isFollowed: false
            hasVip: false
        }
    }

    // 页面栈管理
    StackView {
        id: stackView
        anchors.fill: parent

        initialItem: mainPage
    }

    // 主页面组件
    Component {
        id: mainPage

        Rectangle {
            id: mainPageRect
            color: "#f5f5f5"

            property int gridColumns: 2  // 网格列数

            GridLayout {
                anchors.fill: parent
                rows: 3
                columns: 1
                rowSpacing: 0

                // 顶部标题栏
                Rectangle {
                    Layout.fillWidth: true
                    Layout.preferredHeight: 60
                    color: "white"

                    RowLayout {
                        anchors.fill: parent
                        anchors.margins: 15

                        Text {
                            text: "视频转发"
                            font.pixelSize: 18
                            font.bold: true
                            color: "#333"
                            Layout.fillWidth: true
                        }

                        // 网格布局控制按钮
                        RowLayout {
                            spacing: 10

                            Text {
                                text: "列数:"
                                font.pixelSize: 14
                                color: "#666"
                            }

                            // 减少列数按钮
                            Rectangle {
                                width: 30
                                height: 30
                                radius: 15
                                color: mainPageRect.gridColumns > 1 ? "#00A1D6" : "#e0e0e0"

                                Text {
                                    text: "-"
                                    font.pixelSize: 16
                                    color: parent.color === "#00A1D6" ? "white" : "#999"
                                    anchors.centerIn: parent
                                }

                                MouseArea {
                                    anchors.fill: parent
                                    enabled: mainPageRect.gridColumns > 1
                                    onClicked: {
                                        if (mainPageRect.gridColumns > 1) {
                                            mainPageRect.gridColumns--
                                        }
                                    }
                                }
                            }

                            // 显示当前列数
                            Rectangle {
                                width: 30
                                height: 30
                                radius: 15
                                color: "#f0f0f0"

                                Text {
                                    text: mainPageRect.gridColumns
                                    font.pixelSize: 14
                                    color: "#333"
                                    anchors.centerIn: parent
                                }
                            }

                            // 增加列数按钮
                            Rectangle {
                                width: 30
                                height: 30
                                radius: 15
                                color: mainPageRect.gridColumns < 4 ? "#00A1D6" : "#e0e0e0"

                                Text {
                                    text: "+"
                                    font.pixelSize: 16
                                    color: parent.color === "#00A1D6" ? "white" : "#999"
                                    anchors.centerIn: parent
                                }

                                MouseArea {
                                    anchors.fill: parent
                                    enabled: mainPageRect.gridColumns < 4
                                    onClicked: {
                                        if (mainPageRect.gridColumns < 4) {
                                            mainPageRect.gridColumns++
                                        }
                                    }
                                }
                            }
                        }
                    }
                }

                // 用户网格视图
                GridView {
                    id: userGridView
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    Layout.margins: 10

                    model: userModel
                    cellWidth: width / mainPageRect.gridColumns
                    cellHeight: 120

                    delegate: Rectangle {
                        width: userGridView.cellWidth - 10
                        height: userGridView.cellHeight - 10
                        color: "white"
                        radius: 10

                        // 添加阴影效果
                        Rectangle {
                            anchors.fill: parent
                            anchors.margins: -2
                            radius: 12
                            color: "#00000010"
                            z: -1
                        }

                        MouseArea {
                            anchors.fill: parent
                            onClicked: {
                                // 跳转到用户详情页
                                stackView.push(userDetailPage, {
                                    "username": model.username,
                                    "description": model.description,
                                    "avatar": model.avatar,
                                    "isFollowed": model.isFollowed,
                                    "hasVip": model.hasVip
                                })
                            }

                            onPressed: parent.color = "#f0f0f0"
                            onReleased: parent.color = "white"
                            onCanceled: parent.color = "white"
                        }

                        ColumnLayout {
                            anchors.fill: parent
                            anchors.margins: 15
                            spacing: 8

                            // 头像
                            Rectangle {
                                Layout.preferredWidth: 50
                                Layout.preferredHeight: 50
                                Layout.alignment: Qt.AlignHCenter
                                radius: 25
                                color: "#ddd"

                                Image {
                                    anchors.fill: parent
                                    source: model.avatar
                                    fillMode: Image.PreserveAspectCrop

                                    cache: true
                                    asynchronous: true

                                    // 加载状态处理
                                    Rectangle {
                                        anchors.fill: parent
                                        radius: 25
                                        color: "#f0f0f0"
                                        visible: parent.status === Image.Loading

                                        Text {
                                            anchors.centerIn: parent
                                            text: "..."
                                            color: "#999"
                                            font.pixelSize: 12
                                        }
                                    }

                                    // 加载失败处理
                                    Rectangle {
                                        anchors.fill: parent
                                        radius: 25
                                        color: "#e0e0e0"
                                        visible: parent.status === Image.Error

                                        Text {
                                            anchors.centerIn: parent
                                            text: "?"
                                            color: "#999"
                                            font.pixelSize: 16
                                        }
                                    }
                                }

                                // VIP标识
                                Rectangle {
                                    visible: model.hasVip
                                    width: 16
                                    height: 16
                                    radius: 8
                                    color: "#FFD700"
                                    anchors.right: parent.right
                                    anchors.bottom: parent.bottom

                                    Text {
                                        text: "V"
                                        color: "white"
                                        font.pixelSize: 10
                                        font.bold: true
                                        anchors.centerIn: parent
                                    }
                                }
                            }

                            // 用户名
                            Text {
                                text: model.username
                                font.pixelSize: 14
                                font.bold: true
                                color: "#333"
                                Layout.alignment: Qt.AlignHCenter
                                elide: Text.ElideRight
                                Layout.fillWidth: true
                                horizontalAlignment: Text.AlignHCenter
                            }

                            // 描述
                            Text {
                                text: model.description
                                font.pixelSize: 10
                                color: "#666"
                                Layout.alignment: Qt.AlignHCenter
                                Layout.fillWidth: true
                                wrapMode: Text.WordWrap
                                horizontalAlignment: Text.AlignHCenter
                                maximumLineCount: 2
                                elide: Text.ElideRight
                            }
                        }
                    }
                }

                // 底部占位区域（可选）
                Rectangle {
                    Layout.fillWidth: true
                    Layout.preferredHeight: 0
                    color: "transparent"
                }
            }
        }
    }

    // 用户详情页组件
    Component {
        id: userDetailPage
        UserDetailPage {
            onBackClicked: {
                stackView.pop()
            }
        }
    }
}
